<template>
    <section class="form-container">
        <el-form
            :inline="true"
            :model="filter"
            size="mini"
            label-position="left"
            label-width="70px"
            class="form-filter"
        >
            <el-form-item label="UID">
                <el-input v-model="filter.uid" placeholder="请输入条件查询" @change="getPage()"/>
            </el-form-item>
            <el-form-item label="登录名">
                <el-input v-model="filter.username" placeholder="请输入条件查询" @change="getPage()"/>
            </el-form-item>

            <el-form-item label="手机号">
                <el-input v-model="filter.mobile" placeholder="请输入条件查询" @change="getPage()"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column prop="uid" label="UID"/>
                <el-table-column label="积分">
                    <template #default="scope">
                        <el-tag v-bind:type="scope.row.num>0?'sucess':'danger'">
                            {{ scope.row.num }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="typeName" label="类型"/>
                <el-table-column prop="currentCredit" label="积分余额"/>
                <el-table-column prop="remark" label="备注"/>
                <el-table-column prop="username" label="用户名"/>
                <el-table-column prop="mobile" label="手机号"/>
                <el-table-column prop="nickname" label="昵称"/>
                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间"/>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </section>
</template>
<script>
import {CreditApi} from '@/api/user/credit'

export default {
    name: 'UserCreditList',
    components: {},
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {uid: '', username: '', mobile: ''},
            loading: false,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                uid: this.filter.uid,
                username: this.filter.username,
                mobile: this.filter.mobile
            }

            this.loading = true
            CreditApi.getPage(params)
                .then((response) => {
                    this.page = response
                    this.loading = false
                }).catch((err) => {
                this.loading = false
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        }

    }
}

</script>

